<script setup lang="ts">

import {useRoleViewStore} from "@/store/views/sys/admin/roleStore";

const store = useRoleViewStore()
const {treeRef, selectedIds, treeMenus, menuTypeOptions} = storeToRefs(store)

</script>

<template>
  <x-card shadow="never" class="w-40vw">
    <div><span class="text-lg m-b-2">分配菜单</span></div>
    <el-tree
        ref="treeRef"
        :data="treeMenus"
        default-expand-all
        show-checkbox
        node-key="id"
        :default-checked-keys="selectedIds"
        :props="{label:'name'}"
    >
      <template #default="{node,data}">
        <span class="mr-6 px-1">{{ data.name }}</span>
        <x-tag :value="data.type" :options="menuTypeOptions"/>
      </template>
    </el-tree>
  </x-card>
</template>

<style scoped lang="scss">
.el-tree {
  height: calc(50vh + 8em);
  overflow-y: auto;
}
</style>